<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="14" :lg="14">
        <el-card>
          <div class="type">
            <div v-for="item in list" :key="item.title" class="typeItem">
              <div class="title">{{ item.title }}</div>
              <div class="num">{{ statisticData[item.field] || '-' }}家</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="10" :lg="10">
        <el-card>
          <div class="type">
            <div ref="cyzlValue" class="chart hyflpie"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryForm" label-width="80px">
            <el-form-item label="企业姓名" prop="qymc">
              <el-input v-model="queryParams.qymc" placeholder="请输入企业姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="行业门类" prop="hyml">
              <el-input v-model="queryParams.hyml" placeholder="请输入行业门类" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button sfzh="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table
            class="zylbTableDialog"
            :row-class-name="tableRowClassName"
            :highlight-current-row="false"
            :data="tableData"
            style="width: 100%"
            :height="280"
          >
            <el-table-column prop="tyshxydm" label="统一社会信用代码" width="250" />
            <el-table-column prop="qymc" label="企业名称" width="250" />
            <el-table-column prop="fddbr" label="法定代表人" />
            <el-table-column prop="zs" label="住所" />
            <el-table-column prop="hymc" label="行业名称" />
            <el-table-column prop="ssc" label="所在区域(村)" width="150" />
            <!-- <el-table-column prop="sjzs" label="实际住所" /> -->
            <el-table-column prop="hyml" label="行业门类" />
          </el-table>
          <pagination
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="tableTotal"
            layout="prev, pager, next"
            @pagination="getTableData"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const cyzlValue = ref();
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;

import useMapStore from '@/store/modules/map';

const country = ref(useMapStore().szxcCountryText);
watch(
  () => useMapStore().szxcCountryText,
  (value) => {
    country.value = value;
    getStaticData();
    queryParams.value.ssc = value;
    getTableData();
  }
);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  qymc: '',
  hyml: '',
  ssc: useMapStore().szxcCountryText
});

const tableTotal = ref(0);

const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const list = ref([
  {
    title: '注册企业数',
    num: '205',
    field: 'zcqys'
  },
  {
    title: '农业合作社',
    num: '5',
    field: 'nyhzs'
  },
  {
    title: '餐营业',
    num: '13',
    field: 'cyy'
  },
  {
    title: '住宿业',
    num: '4',
    field: 'zsy'
  }
]);
const initChartPie = async () => {
  var commandstatsIntance = echarts.getInstanceByDom(cyzlValue.value);
  if (!commandstatsIntance) {
    commandstatsIntance = echarts.init(cyzlValue.value, 'macarons');
  }
  // var salvProName = ['安徽省', '河南省', '浙江省', '湖北省', '贵州省', '江西省', '江苏省', '四川省', '云南省', '湖南省'];
  var salvProName = Object.keys(statisticData.value.hymlTj);
  // var salvProValue = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55];
  var salvProValue: Array<number> = Object.values(statisticData.value.hymlTj);
  var salvProMax = []; //背景按最大值
  let maxNum = Math.max(...salvProValue);
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(maxNum);
  }
  const option = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0%',
      top: '2%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function (params) {
        return params[0].name + ' : ' + params[0].value;
      }
    },
    xAxis: {
      show: true,
      type: 'value',
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      data: salvProValue
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: salvProName
      }
      // {
      //   type: 'category',
      //   inverse: true,
      //   axisTick: 'none',
      //   axisLine: 'none',
      //   show: true,
      //   axisLabel: {
      //     textStyle: {
      //       color: '#ffffff',
      //       fontSize: '12'
      //     }
      //   },
      //   data: salvProValue
      // }
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgb(57,89,255,1)'
              },
              {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }
            ])
          }
        },
        barWidth: 10,
        data: salvProValue
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 10,
        barGap: '-100%',
        data: salvProMax,
        itemStyle: {
          normal: {
            color: 'rgba(24,31,68,1)',
            barBorderRadius: 30
          }
        }
      }
    ]
  };
  commandstatsIntance.setOption(option);
  window.addEventListener('resize', () => {
    commandstatsIntance.resize();
  });
};
const tableData = ref([
  {
    dm: '123',
    mc: '',
    dr: '',
    zs: '',
    xymc: '',
    szqy: '',
    sjzs: '',
    hyml: ''
  }
]);
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getTableData();
};

// 统计数据
const statisticData: any = ref({});
// 获取统计数据
const getStaticData = async () => {
  const res = await $szxcapi.jyztTjQuery({ ssc: country.value });
  statisticData.value = res.data || {};
  initChartPie();
};

// 获取列表数据
const getTableData = async () => {
  const res = await $szxcapi.jyztQuery(queryParams.value);
  tableData.value = res.rows || [];
  tableTotal.value = res.total || 0;
};

onMounted(() => {
  nextTick(() => {
    getStaticData();
    getTableData();
  });
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  .el-card {
    // background: #1d5076;
    background: #178af01a;
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 26px;
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
  }
  .hyflpie {
    height: 100%;
    width: 100%;
  }
}

.pagination-container {
  margin-top: auto !important;
}
</style>
